<template>
  <div class="studentBox">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="学生姓名" style="width: 15%;">
        <el-input
          v-model="queryParams.stuName"
          placeholder="输入学生姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="市场部"  style="width: 15%;">
        <el-select 
        v-model="queryParams.origin" 
        clearable 
        placeholder="Select">
          <el-option
            v-for="(item, index) in option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学院" style="width: 15%;">
        <el-select v-model="queryParams.collegeId">
          <el-option label="游戏学院" :value="1" />
          <el-option label="网站工程学院" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="工作城市:" style="width: 15%;">
           <el-cascader placeholder="选择城市" v-model="value1" :options="options" filterable :props="props" @change="onChange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, watch } from 'vue';
import citys from '../../utils/CityData.json'
let options = reactive(citys);
// const tree = ref(citys)
// console.log(tree,'citys=====');
const formInline = reactive({
  user: "",
  region: "",
  date: "",
  collegeId: "",
  workCity: "",
});

var value1: string = ref('');
// var prop = defineProps(['modelValue']); //v-model默认绑定的props名称

var prop = defineProps({
    modelValue: {
        type: String
    }
});

const emit = defineEmits(['handleQuery'])

const onSubmit = () => {
  console.log("submit!");
  emit('handleQuery',queryParams)
};

const option = [
  {
    value: "招生办",
    label: "招生办",
  },
  {
    value: "中原市场部",
    label: "中原市场部",
  },
  {
    value: "春峰市场部",
    label: "春峰市场部",
  },
  {
    value: "苏皖市场部",
    label: "苏皖市场部",
  },
  {
    value: "陕豫市场部",
    label: "陕豫市场部",
  },
];


// 所有省/直辖市/自治区/特别行政区
// const provinces = tree.value.children.map((item) => item.name);
 
// 根据省/直辖市/自治区/特别行政区获取市
// const cities = computed(() => {
//   const province = tree.value.children.find(
//     (item) => item.name === property.province
//   );
//   return province?.children?.map((item) => item.name) || [];
// });
 
// // 根据市获取区
// const districts = computed(() => {
//   const province = tree.value.children.find(
//     (item) => item.name === property.province
//   );
//   const city: TreeNode | undefined = province?.children?.find(
//     (item) => item.name === property.city
//   );
//   return city?.children?.map((item:any) => item.name) || [];
// });
let props = reactive({
    expandTrigger: 'hover' as const,
    emitPath: false,
    value: 'code',
    label: 'label',
    children: 'children'
});
let queryParams = reactive<any>({});
</script>

<style scoped lang="scss">
.el-form {
  width: 100%;
}

.studentBox {
    width: 90vw;
    position: relative;
  display: flex;
  align-items: center;
  justify-content:space-around;
//   background: red;
  .el-input {
    width: 60%;
    background: rgba(255, 255, 255, 0);
  }
}
</style>